// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form,Row,Col,Input,Button} from 'antd'
//导入路由组件，用于跳转等
const FormItem = Form.Item
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'

// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './platformSettingDetailStyle.less'
//引用listPage
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
//引入富文本编辑器
import Editor from 'widget/Editor/Editor'
import {calculate_object_name, uploadObject2OSS} from 'utils/upload'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */

// 获取上传图片配置 - 用于编辑器
const getUploadCfg = () => {
  return {
    // 自定义上传
    customUploadImg: function(files, insert){
      let file = files[0]
      if(!file) return false
      // file 已选择的文件对象
      // home 文件对象的组名(目录)
      uploadObject2OSS(file, 'ad').then((imgUrl) => {
        // 插入编辑器
        insert(imgUrl)
      }).fail((err) => {
        console.log(err || '未知的上传图片异常')
        //message.error(err || '未知的上传图片异常')
      })
    },
  }
}

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const routeView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  

  return (
    <div className={cx('pageLayout')}>
      <div className="public_listMain">
          <div className={styles.functionButton +" functionButton"}>
            <Button type='primary'>预览</Button>
            <Button type='primary' onClick={e=>submit(1)}>提交</Button>
          </div>
      </div>
      <CollapsiblePanels title="基本信息" hideUpDownBtn={true} >
        <Row>
          <Col className="col" span={16}>
            <FormItem {...formItemLayout}
              label="标题">
              {getFieldDecorator('title', {
                rules: [
                  { required: true, whitespace: true, message: '请输入标题' },
                ],
              })(<Input placeholder={'请输入标题'}/>)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col className="col" span={16}>
            <FormItem {...formItemLayout}
              label="图文内容">
              {getFieldDecorator('content', {
                rules: [
                  { required: true, whitespace: true, message: '请输入图文内容' },
                ],
              })(<Editor html={model.modelObj.content}
                onChange={(e) => {inputChange(e, 'content')}} getUploadCfg = {getUploadCfg}/>)}
            </FormItem>
          </Col>
        </Row>
      </CollapsiblePanels>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(routeView))